﻿<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<title></title>
	<meta charset="utf-8" />
	<link href="../../dist/css/ud2.css" rel="stylesheet" />
	<link href="../src/test.css" rel="stylesheet" />
	<script src="../../vendor/js/jquery.js"></script>
	<script src="../../dist/js/ud2.js"></script>

	<style>
		.box, .box-1, .box-2, .box-3 {
			width: 200px;
			height: 200px;
		}

		.box {
			overflow: hidden;
		}

		.box-1 {
			background: #8f9;
		}

		.box-2 {
			background: #89f;
		}

		.box-3 {
			background: #f98;
		}

		.box-4 {
			width: 200px;
			height: 80px;
			font-size: 60px;
			line-height: 80px;
			text-align: center;
			background: #98f;
			color: #fff;
		}
	</style>
</head>
<body>
	<h3>滚轮事件</h3>

	<fieldset>
		<legend>样式</legend>
		<div>
			<h5>通过设置 setScroll，在 box 上滑动滚轮会触发不同效果</h5>
			<div class="box">
				<div class="box-1">1</div>
				<div class="box-2">2</div>
				<div class="box-3">3</div>
			</div>

			<hr class="hr" />

			<h5>通过设置 setDown、setUp，在 box 上滑动滚轮会触发不同效果</h5>
			<div class="box-4">0</div>

		</div>
	</fieldset>

	<script>
		var mouseWheel = ud2.eventMouseWheel('.box');
		mouseWheel.i = 0;
		mouseWheel.lock = false;
		mouseWheel.setScroll(function (move) {
			if (!mouseWheel.lock) {
				mouseWheel.lock = true;
				var first = this.children().first();
				if (move > 0) {
					mouseWheel.i++;
				} else {
					mouseWheel.i--;
				}
				mouseWheel.i = mouseWheel.i > 2 ? 2 : mouseWheel.i;
				mouseWheel.i = mouseWheel.i < 0 ? 0 : mouseWheel.i;
				first.animate({
					'margin-top': mouseWheel.i * -200
				}, 500, function () {
					mouseWheel.lock = false;
				});
			}
		});
		var mouseWheelBox4 = ud2.eventMouseWheel('.box-4');
		mouseWheelBox4.i = 0;
		mouseWheelBox4.setUp(function () {
			mouseWheelBox4.i--;
			this.html(mouseWheelBox4.i);
		}).setDown(function () {
			mouseWheelBox4.i++;
			this.html(mouseWheelBox4.i);
		});
	</script>
</body>
</html>
